<template>

    <van-nav-bar title="课程"  class="fixed-top">
      <template #right>
        <van-icon name="notes-o" class="icon" size="20" @click="onClickNotes" />
        <van-icon name="search" class="icon" size="20" @click="onClickSearch" />
      </template>
    </van-nav-bar>
<div >



  <van-sticky >

  <van-tabs v-model:active="activeTab"   >

    <van-tab class="my-tab" title="线上课程">

      <CourseList :courses="onlineCourses" courseType="1" />
    </van-tab>
    <van-tab class="my-tab"  title="线下课程">
      <CourseList :courses="offlineCourses"  courseType="2"  />
    </van-tab>
    <van-tab  class="my-tab" title="公开课" >
      <CourseList :courses="publicCourses" courseType="3"  />
    </van-tab>
  </van-tabs>
  </van-sticky>

</div>

</template>

<script setup>
import { ref, onMounted } from 'vue';
import CourseList from "../../components/CourseList.vue";




const activeTab = ref(0);
const onlineCourses = ref([]);
const offlineCourses = ref([]);
const publicCourses = ref([]);

const onClickNotes = () =>{
  console.log("notes")
};

const onClickSearch = () =>{
  console.log("search")
};


// onMounted(async () => {
//   onlineCourses.value = await fetchCourses('online');
//   offlineCourses.value = await fetchCourses('offline');
//   publicCourses.value = await fetchCourses('public');
// });
</script>

<style>
body {
  margin: 0;
  font-family: Arial, sans-serif;
}
.icon {
  margin-right: 10px; /* 可选，为了视觉效果添加的样式 */
}
.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.my-tab:active {
 //background-color: rgb(255,0,0);
  color: #CCBE97;
}


</style>
